<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/mui.indexedlist.css" rel="stylesheet" />
		<style type="text/css">
			*{
				--def-color:#000;
			}
			.img-radius-50{
				border-radius: 50%;
				width: 50px;
				height: 50px;
			}
			.mui-content {
				height: 100vh;
			}
			.mui-content > .mui-table-view:first-child{
				margin: 0;
			}
			.mui-table-view-cell{
				height:60px
			}
			.mui-table-view-cell:after {
				background-color: rgba(0,0,0,.1);
				left: 66px;
			}
			.mui-indexed-list{
				height:inherit;
			}
			#user_no{
				font-size: 12px;
				margin-left: 5px;
				margin-right: 5px;
				color: #EE9900;
			}
			
			.mui-table-view-cell > a:active{
				position: absolute;
				background-color: #000000;
				left: 0;
				right: 0;
				
			}
			.mui-table-view-cell > a:active .mui-media-body{
					color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">

			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友">
				</div>
				
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="friends-container">
						
					</ul>
				</div>
			</div>
		</div>
		
		<script src="../../js/mui.js"></script>
		<script src="../../js/main.js"></script>
		<script src="../../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var userEntity;
			mui.plusReady(function () {
				userEntity = JSON.parse(plus.storage.getItem("userInfo"));
				const currentWebview =  plus.webview.currentWebview();
				getFriends(userEntity.token,function(){
					loadJS("../../js/mui.indexedlist.js",function(){
						//create
						window.indexedList = new mui.IndexedList(list);
					});
				});
				
				currentWebview.addEventListener("show",function(){
					getFriends(userEntity.token,function(){
						window.indexedList = new mui.IndexedList(list);
					});
				})
				
				mui(document).on("tap",".friends-btn",function(){
					var userId = $(this).attr("data-user-id");
					var userName = $(this).attr("data-user-name");
					var userPhoto = $(this).attr("data-user-photo");
					plus.nativeUI.showWaiting("请稍后...")
					plus.webview.create("../im-chat.html","im-chat.html",{},{_ext_user_id:userId,_ext_user_name:userName,_ext_user_photo:userPhoto})
					
				})
				
				document.querySelectorAll(".mui-table-view-cell.mui-indexed-list-item").forEach(function(obj){
					obj.addEventListener("tap",function(e){
						console.log(JSON.stringify(e))
						mui.alert(JSON.stringify(this),"bianti");
					})
				})
			})
			function getFriends(token,callback = (()=>{})){
				_SERVER.user.getFriends(token).then(res=>{
					if(res.code === "200"){
						setTimeout(()=>{
							APP.cache.UserFriends.set(userEntity.id,res.data);
							APP.cache.UserFriends.get(userEntity.id);
						},1); 
						const html = getHtml(res.data);
						$("#friends-container").html(html);
						if(callback){
							callback() 
						}
					}else{
						mui.toast(res.msg);
					}
				});
			}
			
			function getHtml(data){ 
				if(!data){
					return "";
				}
				var html="";
				for(var key in data){
					html+='<li data-group="'+key+'" class="mui-table-view-divider mui-indexed-list-group">'+key+'</li>';
					const _ds = data[key];
					for (var i = 0; i < _ds.length; i++) {
						
						html+='<li class="mui-table-view-cell mui-indexed-list-item friends-btn" data-user-photo="'+(_ds[i].photo?_ds[i].photo:"../../img/def_photo.jpg")+'" data-user-name="'+_ds[i].friendName+'"  data-bind-id="'+_ds[i].id+'" data-user-id="'+_ds[i].friendId+'">';
							html+='<a href="javascript:;">';
								html+='<img class="mui-media-object mui-pull-left img-radius-50" src="'+(_ds[i].photo?_ds[i].photo:"../../img/def_photo.jpg")+'">';
								html+='<div class="mui-media-body">';
									html+=_ds[i].friendName+'<span id="user_no">('+_ds[i].friendUserName+')</span>';
									html+='<p class="mui-ellipsis">来源：'+getBindTypeText(_ds[i].bindType)+'</p>';
								html+='</div>';
							html+='</a>';
						html+='</li>';
					}
				}
			
				return html;
			}
			
			const getBindTypeText = function(type){
				var text = "未知";
				if(type == 2){
					text="通过扫描二维码";
				}else if(type == 1){
					text = "通过账号添加"
				}
				return text;
			}
			function loadJS( url, callback ){
			
			    var script = document.createElement('script'),
			
			        fn = callback || function(){};
			
			    script.type = 'text/javascript';
			
			    
			
			    //IE
			
			    if(script.readyState){
			
			        script.onreadystatechange = function(){
			
			            if( script.readyState == 'loaded' || script.readyState == 'complete' ){
			
			                script.onreadystatechange = null;
			
			                fn();
			
			            }
			
			        };
			
			    }else{
			
			        //其他浏览器
			
			        script.onload = function(){
			
			            fn();
			
			        };
			
			    }
			
			    script.src = url;
			
			    document.getElementsByTagName('body')[0].appendChild(script);
			
			}
		</script>
	</body>

</html>
